const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //此插件可以单独抽离打包的css文件, 默认打包时是把css打包进js的
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') //css压缩插件
module.exports = {
    //从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度可配置性，可以很好满足你的需求。
    //1. 入口 entry 默认值是 ./src/index.js
    entry: './script.js',
    //2. 出口 默认值是 path: './dist', filename: 'main.js'
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'my-first-webpack.bundle.js',
    },
    //3 webpack默认只能打包js json文件,
    //如需打包其他文件,需要load, 使用load前需要先安装对应的load npm install --save-dev css-loader ts-loader
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            { 
              loader: 'babel-loader',
              options: {presets: '@vue/cli-plugin-babel/preset'}, //作用是把vue es6 代码转换为es5
            }, 
          ]
        },
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },  //作用是将css插入到html的body中
            {
              loader: 'css-loader', //作用是打包时识别css模块
              options: {modules: true}
            },
            { loader: 'sass-loader' },
            { loader: MiniCssExtractPlugin.loader}, //抽离css为单独文件
          ]
        },
        { test: /\.ts$/, use: 'ts-loader' }, //ts load
        { test: /\.html$/, use: 'html-withimg-loader' },//  html中图片引入的loader
        { // 图片的loader file-loader
            test: /\.(png|jpg|jpeg|gif)$/, 
            use: [{
                loader: 'file-loader',
                options: {
                    esModule: false,
                    outputPath: 'img/', //设置图片打包后存放的文件夹
                }
            }] 
        },
      ]
    },
    //4 插件 plugin ,使用步骤1. npm install -S 下载安装 2.引入 3.配置
    // html-webpack-plugin 打包html的插件, 打包时默认会把出口的js打包进html, 可配置参数取消
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //指定打包的文件,默认打包所有html
            filename: './src2/newindex.html', //修改打包后的文件名
            excludeChunks: ['xx'], //打包后不引入 xx , 默认全部引入
            chunks: ['jquery'], //打包后引入jquery ,默认全部引入
        }),
        new MiniCssExtractPlugin({
            filename: './css/[name].css',  //设置打包胡的存放路径, [name]为原文件名存放

        }),
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    //5 反向代理
    devServer: {
      proxy: {
        '/UMC': {
          target: 'http://sso.kukahome-internal.com',
          ws: false,
          changeOrigin: true,
          pathRewrite: {
            '^/UMC': '',
          },
        },
      },
      port: 4000,
      headers: { 'Access-Control-Allow-Origin': '*' },
    },
    mode: 'development', // 默认是production,  打包后的代码是否压缩
};